<template>
  <!-- :style="isRotate ? rotateStyle : ''"  -->
  <div id="app" :class="isPc ? '' : 'app'">
    <keep-alive>
      <router-view
        v-if="$route.meta.keepAlive"
        v-wechat-title="$route.meta.title"
      ></router-view>
    </keep-alive>
    <router-view
      v-if="!$route.meta.keepAlive"
      v-wechat-title="$route.meta.title"
    ></router-view>
    <!-- <div v-if="!isPc" class="change-page">
      <div class="button" @click="$router.push('/')">↓</div>
    </div> -->
    <div class="mobile-popup" v-if="!isPc && popUp" @click="hidePopUp()">
      <div class="mobile-popup-content">
        <img src="../src/assets/mobile-move.png" />
        <p>左右滑动切换页面</p>
      </div>
    </div>
  </div>
</template>

<script>
var router;
var direction;
var touchesLength = 1;
export default {
  name: "App",
  components: {},
  data() {
    return {
      isPc: true,
      isRotate: false,
      rotateStyle: "transform: scale(.3) rotate(0deg);",
      popUp: true,
    };
  },
  beforeRouteEnter(to, from, next) {
    if (from.name == "confirm") {
      to.meta.isBack = true;
    }
    next();
  },
  created() {
    this.isPC();
    this.getBjlJumpTime();
    router = this.$router;
  },
  mounted() {
    document.getElementById("app").style.display = "block";
    document.getElementById("appLoading").style.display = "none";
  },
  methods: {
    // 获取办件量切换时间
    getBjlJumpTime() {
      this.$http
        .get(window.SITE_CONFIG.apiURL + "/static/params", {
          params: {
            paramCode: 1004,
          },
        })
        .then((res) => {
          const result = res.body.data;
          setInterval(() => {
            const nowDate = new Date();
            const nowHour = nowDate.getHours() + "";
            if (
              result.split(",").indexOf(nowHour) !== -1 &&
              nowDate.getMinutes() === 0 &&
              nowDate.getSeconds() === 0
            ) {
              location.reload();
            }
          }, 1000);
        })
        .catch(() => {});
    },
    //判断是否移动端访问
    isPC() {
      const userAgentInfo = navigator.userAgent;
      console.log(userAgentInfo);
      const Agents = new Array(
        "Android",
        "iPhone",
        "SymbianOS",
        "Windows Phone",
        "iPad",
        "iPod"
      );
      for (let v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          this.isPc = false;
          break;
        }
      }
    },
    // 隐藏遮罩层
    hidePopUp() {
      this.popUp = false;
    }
  },
};

var startx, starty;
var index = 0;
var routers = [
  "/mobile/index1",
  "/mobile/index2",
  "/mobile/index3",
  "/mobile/index4",
  "/mobile/index5",
];

// 获得角度 https://blog.csdn.net/qq_39198420/article/details/76502267
function getAngle(angx, angy) {
  return (Math.atan2(angy, angx) * 180) / Math.PI;
}

// 根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动
function getDirection(startx, starty, endx, endy) {
  var angx = endx - startx;
  var angy = endy - starty;
  var result = 0;
  //如果滑动距离太短
  if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
    return result;
  }
  var angle = getAngle(angx, angy);
  if (angle >= -135 && angle <= -45) {
    result = 1;
  } else if (angle > 45 && angle < 135) {
    result = 2;
  } else if (
    (angle >= 135 && angle <= 180) ||
    (angle >= -180 && angle < -135)
  ) {
    result = 3;
  } else if (angle >= -45 && angle <= 45) {
    result = 4;
  }
  return result;
}
function goChangePage(params) {
  if (params === "up") {
    if (index >= 4) {
      index = -1;
    }
    index = index + 1;
  }
  if (params === "down") {
    if (index <= 0) {
      index = 5;
    }
    index = index - 1;
  }
  // console.log("跳转??", router);
  router.push(routers[index]);
}
// 手指接触屏幕
document.addEventListener(
  "touchstart",
  function (e) {
    startx = e.touches[0].pageX;
    starty = e.touches[0].pageY;
    if (e.touches.length == 1) {
      //判断是否有几个点在屏幕上
      touchesLength = 11;
    } else {
      touchesLength = 1;
    }
  },
  false
);
//手指离开屏幕
document.addEventListener(
  "touchend",
  function (e) {
    var endx, endy;
    endx = e.changedTouches[0].pageX;
    endy = e.changedTouches[0].pageY;
    direction = getDirection(startx, starty, endx, endy);
    //如果页面处于放大或缩小状态时，返回,获取当前页面展现的实际宽度
    // console.log('结束???', window.innerWidth, document.documentElement.clientWidth);
    // if(window.innerWidth !=document.documentElement.clientWidth) {
    //   return
    // }
    if (direction == 1 && touchesLength == 11) {

      goChangePage("up");
      // router.push("/mobile/index2");
    }
    if (direction == 2 && touchesLength == 11) {

      goChangePage("down");
    }
    // switch (direction) {
    //   case 0:
    //     // alert("未滑动！");
    //     break;
    //   case 1:
    //     // alert("向上！")
    //     break;
    //   case 2:
    //     // alert("向下！")
    //     break;
    //   case 3:
    //     // 向左
    //     // index = index === 0 ? 2 : index - 1
    //     router.push('/mobile/index2');
    //     console.log('333', router)
    //     break;
    //   case 4:
    //     // 向右
    //     index = index === 2 ? 0 : index + 1
    //     router.push(routers[index])
    //     break;
    //   default:
    // }
  },
  false
);
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #ffffff;
}
.app {
  position: fixed;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: #050f3b;
  /* transform: scale(.32) rotate(90deg);
  transform-origin: 93.1% 9.2%; */
}
/* .app-rotate {
  transform: scale(0.3) rotate(0deg);
} */
html,
body {
  height: 100%;
}
.change-page {
  position: fixed;
  bottom: 50px;
  left: 50px;
}
.change-page .button {
  font-size: 2rem;
  margin: 1rem;
  border: 1px solid #e6e6e6;
  text-align: center;
  height: 8rem;
  width: 8rem;
  line-height: 8rem;
  border-radius: 50%;
  cursor: pointer;
}
</style>
